<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分类</title>
  <!-- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> -->
    <!-- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> -->
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/type.css">
</head>
<style>
    html,body{height: 100%;}
    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label{
      color: #FE6162 !important;
    }
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{

      color: #FE6162 !important;
    }
</style>
<body>
<div class="type_body">

  <ul class="type_list">
    <li class="type_list_activity"><span>全部</span></li>
    <li class=""><span>男装</span></li>
    <li class=""><span>女装</span></li>
    <li class=""><span>童装</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
    <li class=""><span>综合</span></li>
  </ul>
  <div class="type_box">
    <p class="type_box_title"> <span></span>&nbsp;全部&nbsp;<span></span></p>
    <ul class="type_box_list">
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
      <li>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt="">
        <san>风衣</san>
      </li>
<!--      <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt=""></li>-->
<!--      <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=849356334,2732160917&fm=11&gp=0.jpg" alt=""></li>-->
    </ul>
  </div>
</div>
<div class="weui-tabbar" style="position: fixed;bottom:0;">
    <a href="../index.html" class="weui-tabbar__item weui-bar__item_on">
      <div class="weui-tabbar__icon">
        <img src="../images/index.png" alt="">
      </div>
      <p class="weui-tabbar__label" style="color:#999 !important">尚街</p>
    </a>
    <a href="./page/type.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="../images/class_active.png" alt="">
      </div>
      <p class="weui-tabbar__label" style="color: #FE6162">分类</p>
    </a>
    <a href="./square.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="../images/square.png" alt="">
      </div>
      <p class="weui-tabbar__label">广场</p>
    </a>
    <a href="./main.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="../images/mine.png" alt="">
      </div>
      <p class="weui-tabbar__label">个人中心</p>
    </a>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

<script>
  $(".type_list li").click(function(){
    $(this).addClass("type_list_activity").siblings().removeClass("type_list_activity");
    $(".type_box_title").html ("<span></span>&nbsp;"+$(this).text()+"&nbsp;<span></span>")
  });

  //点击跳转到商品详情
  $('.type_box_list>li').click(()=>{
    window.location.href= './shop/goodsDetails.html?id='
  })
</script>
</body>
</html>
